<div class="card-title" style="padding-top: 1em">
  <cmdb-content-header [faIcon]="faIcon" title="{{pageTitle}}"></cmdb-content-header>
</div>

<div class="card-body" style="padding: 0 0 1em 0;">
  <button type="button"
          *permissionLink="['base.framework.object.delete']"
          [disabled]="selectedObjects.length<=0"
          class="btn btn-danger btn-sm mr-1" (click)="delManyObjects()">
    Delete Selected <span class="badge badge-secondary badge-pill">{{selectedObjects.length}}</span>
  </button>

  <button type="button"
          *permissionLink="['base.framework.object.edit']"
          [disabled]="selectedObjects.length<=0"
          class="btn btn-secondary btn-sm mr-1"
          [routerLink]="['/framework/object/change/', { typeID: typeID , ids: selectedObjects}]">
    <i class="fas fa-tasks"></i> Bulk Change <span class="badge badge-primary badge-pill">{{selectedObjects.length}}</span>
  </button>

  <button type="button"
          *permissionLink="['base.framework.object.add']"
          class="btn btn-success btn-sm mr-1"
          [routerLink]="['/framework/object/add/', typeID]">
    <i class="fas fa-plus"></i> Add
  </button>

  <span class="card-group float-right">
      <div class="btn-group" *permissionLink="'base.export.object.*'">
        <button type="button" id="exportButton" class="btn btn-warning btn-sm dropdown-toggle"
                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <fa-icon icon="file-export"></fa-icon> Export
        </button>
        <ul class="dropdown-menu dropdown-menu-right dropdown-menu-lg-left" aria-labelledby="exportButton">
          <li *ngFor="let item of formatList" id="export-{{item.id}}"
              [className]="item.active && objects?.recordsTotal > 0 ? 'dropdown-item' : 'dropdown-item disabled'"
              (click)="exportingFiles(item)"
              [ngbTooltip]="item.helperText">
            <fa-icon icon="{{item.icon}}"></fa-icon> {{item.label}}
            <span *ngIf="selectedObjects.length == 0">( all )</span>
            <span *ngIf="selectedObjects.length > 0"> ( {{selectedObjects.length}} )</span>
          </li>
        </ul>
      </div>
  </span>
</div>

<div id="object-list-datatable">
  <table #dtTableElement id="dt-object-list"
         datatable [dtOptions]="dtOptions"
         class="table framework-table table-striped table-bordered">
    <tbody *ngIf="objects?.recordsTotal == 0">
    <tr>
      <td colspan="3" class="text-center">No data!</td>
    </tr>
    <tbody>
  </table>
</div>
